<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="../../jquery/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <h1>员工列表：</h1>
    <a href="/views/11_v-employee/input.html">添加</a>
    <table width="60%" cellpadding="0" cellspacing="0" border="1">
        <thead>
        <tr>
            <td>序号</td>
            <td>名字</td>
            <td>邮箱</td>
            <td>年龄</td>
            <td>超管</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in list">
            <td>{{e.id}}</td>
            <td>{{e.name}}</td>
            <td>{{e.email}}</td>
            <td>{{e.age}}</td>
            <td>{{e.admin | adminFormat}}</td>
            <td>
                <a v-bind:href="'input.html?id='+e.id">编辑</a>
                <a href="javascript:void(0)" @click="del(e.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>


</div>

<script>


    let app = new Vue({
        el: '#app',
        data: {
            list:[]
        },
        mounted() {
            let $vue = this;
            $.get('http://localhost:8888/employees',function (data) {
                $vue.list = data;
            })
        },
        filters: {
            adminFormat: function (val) {
                return val === 1? "是":"否";

            }
        },
        methods: {
            del: function (id) {
                $.ajax({
                    url: "http://localhost:8888/employees/"+id,
                    type: 'DELETE',
                    success:function (data) {
                        if(data.code ===0) {
                            location.href="index.html"
                            return
                        }
                        alert(data.msg)

                    }
                })
            }
        }
    })
</script>
</body>
</html>